<template>
  <div class="header">
    <h1>我是Header</h1>
    <p>Count的值是{{ count }}</p>
    <p>价格是{{ price }}</p>
  </div>
</template>

<script>
import {mapState} from "vuex"
export default {
    name: "Header",
   
   //因为插值语法中拿到state的数据太复杂 所以使用计算属性获取
   computed:{
    // mapState(["count" , "price"]) mapState方法返回一个对象 对象的属性名就是传递的数组中的值
    // count属性: 值是函数 调用这个函数的返回值就是store中count的值
    // price属性: 值是函数 调用这个函数的返回值就是store中price的值
    ...mapState(["count" , "price"]) 


    //2.mapState
    /*  ...mapState(["count" , "price"]) 展开这个对象就是下面这种写法 
    count(){
      return this.$store.state.count
    },
    price(){
      return this.$store.state.price
    } */


    //1.直接使用计算属性
    /* count(){
      return this.$store.state.count
    },
    price(){
      return this.$store.state.price
    } */
   },
}
</script>

<style>
.header {
  margin: 30px;
  background: hotpink;
  text-align: center;

}
</style>